<php>$this->display(tpl('head',true)); </php>

<script src="/public/global/js/colpick.js" type="text/javascript" charset="utf-8"></script>
<fieldset class="layui-elem-field layui-field-title">
  	<legend>网站导航菜单管理</legend>
  	<div class="layui-row" style="margin: 10px">
		<a class="layui-btn layui-btn-sm  layui-btn-warm" href="/admin/homemenu/index/">菜单管理</a>
		<a class="layui-btn layui-btn-sm  layui-btn-danger" href="/admin/homemenu/add/">添加菜单</a>
	</div>
</fieldset>
<style>
	.layui-table thead tr th{
		text-align: center;
	}
	.layui-form-switch{
		margin-top: 0;
	}
	.layui-table tbody tr td:nth-child(3),.layui-table tbody tr td:nth-child(5){
		text-align: center;
	}
</style>
<form class="layui-form" id="from" method="post" action="">
	<table class="layui-table" >
		<thead>
			<tr>
				<th>名称</th>
				<th width="100">排序</th>
				<th width="80">状态</th>
				<th width="100">字体颜色</th>
				<th width="110">操作</th>
			</tr>
		</thead>
		<tbody id="tbody">
			<foreach array="data">
			<php>
				$state= !$row['state'] ? 'checked' : '';
				$target= !$row['target'] ? '_self' : '_blank';
			</php>
			<tr>
				<td>
					<a href="{{ $row['link'] }}" target="{{ $target }}" style="color: {{ $row['color'] }};">【{{ $row['name'] }}】</a>
				</td>
				<td><input class="layui-input" type="number" name="order[{{ $row['id']}}]" value="{{ $row['reorder']}}" /></td>
				<td>
					<input {{$state}} lay-skin="switch" lay-filter="state" id="{{ $row['id']}}" lay-text="开启|关闭" type="checkbox">
				</td>
				<td>
					<input class="layui-input" type="text" id="color{{ $row['id']}}" name="color[{{ $row['id']}}]" value="{{ $row['color']}}" />
					<script type="text/javascript">
				    	$("#color{{ $row['id'] }}").css('background-color','{{ $row['color']}}');
				    	$("#color{{ $row['id'] }}").css('color','#fff');
				    	$('#color{{ $row['id'] }}').colpick({
								layout:'hex',
								submit:0,
								colorScheme:'dark',
							onChange:function(hsb,hex,rgb,el,bySetColor) {
								$(el).css('border-color','#'+hex);
								$(el).css('color','#FFF');
								$(el).css('background-color','#'+hex);
								if(!bySetColor) $(el).val('#'+hex);
							}
						}).keyup(function(){
							$(this).colpickSetColor(this.value);
						});
				    </script>
				</td>
				<td>
					<a class="layui-btn layui-btn-sm layui-btn-warm" href="/admin/homemenu/edit/id_{{ $row['id'] }}">编辑</a>
					<a class="layui-btn layui-btn-sm layui-btn-danger" href="/admin/homemenu/del/id_{{ $row['id'] }}">删除</a>
				</td>
			</tr>
			<if condition="$row['list']">
			<foreach array="row['list']" value="rows">
				<php>
					$state= !$rows['state'] ? 'checked' : '';
					$target=!$rows['target'] ? '_self' : '_blank';
				</php>
				<tr>
					<td>
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|——&nbsp;&nbsp;<a href="{{ $rows['link'] }}" target="{{ $target }}" style="color: {{ $rows['color'] }};">【{{ $rows['name'] }}】</a>
					</td>
					<td><input class="layui-input" type="number" name="order[{{ $rows['id']}}] " value="{{ $rows['reorder'] }}" /></td>
					<td>
						<input {{ $state }} lay-skin="switch" lay-filter="state" id="{{ $rows['id'] }}" lay-text="开启|关闭" type="checkbox">
					</td>
					<td>
						<input class="layui-input" id="color{{ $rows['id'] }}" type="text" name="color[{{ $rows['id'] }}]" value="{{ $rows['color'] }}" />
						<script type="text/javascript">
							$("#color{{ $rows['id'] }}").css('background-color','{{ $rows['color'] }}');
							$("#color{{ $rows['id'] }}").css('color','#fff');
							$('#color{{ $rows['id'] }}').colpick({
									layout:'hex',
									submit:0,
									colorScheme:'dark',
								onChange:function(hsb,hex,rgb,el,bySetColor) {
									$(el).css('border-color','#'+hex);
									$(el).css('color','#FFF');
									$(el).css('background-color','#'+hex);
									if(!bySetColor) $(el).val('#'+hex);
								}
							}).keyup(function(){
								$(this).colpickSetColor(this.value);
							});
						</script>
					</td>
					<td>
						<a class="layui-btn layui-btn-sm layui-btn-warm" href="/admin/homemenu/edit/id_{{ $rows['id'] }}">编辑</a>
						<a class="layui-btn layui-btn-sm layui-btn-danger" href="/admin/homemenu/del/id_{{ $rows['id'] }}">删除</a>
					</td>
				</tr>
				</foreach>
			</if>
		</foreach>
		</tbody>
	</table>
	<div class="my_button" style="margin-top: 20px;">
		<input type="hidden" name="step" id="step" value="post" />
		<button class="layui-btn">立即设置颜色或排序</button>
	</div>
</from>

<script type="text/javascript">
	layui.config({
		version: '{{ NOWTIME }}'
	});
	layui.use(['form','layer'], function(){
	  	var form = layui.form
	  	,layer = layui.layer;
	  	
	  	form.on('switch(state)', function(obj){
	  		
		  	if(obj.elem.checked==true){
		  		var state=0;
		  	}else{
		  		var state=1;
		  	}
		  	console.log(obj);
		  	$.ajax({
					url:"/admin/homemenu/state/",
					type: 'POST',
					data:{'state':state,'id':obj.elem.id,'json':true},
					dataType: 'json',
					success: function(data){
						if(data.code !=0){
							layer.alert(data.text);
						}else{
							if(obj.elem.checked==true){
						  		layer.tips("已开启", obj.othis);
						  	}else{
						  		layer.tips("已关闭", obj.othis);
						  	}
						}
						
					}
				})
	  	});
	})
</script>


<php>
$this->display(tpl('foot')); 
</php>
